<template>
    <div class="container place-list-container">
        <div class="operation-wrapper">
            <el-button
                type="primary"
                size="small"
                @click="handleRouteToDetail()"
                :disabled="!authResult.auth_add">新增场地</el-button>
            <a
                :href="authResult.auth_import ? '//cdn.zsdx.cn/admin/file/UnderLineRoadshowAreaTemplate.xlsx' : 'javascript:;'"
                download>
                <el-button
                    size="small"
                    :disabled="!authResult.auth_import">下载模版</el-button>
            </a>
            <div class="btn-import-wrap">
                <input
                    :disabled="!authResult.auth_import || importing"
                    class="import-input"
                    :class="{ 'abled': authResult.auth_import, 'disabled': !authResult.auth_import }"
                    accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
                    type="file"
                    @change="tirggerFile($event)">
                <el-button
                    size="small"
                    :disabled="!authResult.auth_import || importing">导入</el-button>
            </div>
            <el-button
                size="small"
                @click="handleExport">导出</el-button>
        </div>
        <div class="content-wrapper">
            <el-row
                class="search-wrapper"
                :gutter="20">
                <el-form
                    label-position="left"
                    label-width="70px"
                    size="small">
                    <el-col
                        class="filter-item"
                        :span="6">
                        <el-form-item label="省市：">
                            <el-cascader
                                v-model="filterData.region"
                                placeholder="请选择或输入搜索"
                                :options="region"
                                :props='{value:"id", label:"name"}'
                                expand-trigger="hover"
                                filterable
                                change-on-select />
                        </el-form-item>
                    </el-col>
                    <el-col
                        class="filter-item"
                        :span="6">
                        <el-form-item label="学校名称：">
                            <el-input
                                class="inline-input"
                                v-model="filterData.school_name"
                                placeholder="请输入" />
                        </el-form-item>
                    </el-col>
                    <el-col
                        class="search-btn-wrapper"
                        :span="6">
                        <el-button
                            size="small"
                            type="primary"
                            @click="getTableData">搜索</el-button>
                    </el-col>
                </el-form>
            </el-row>
            <div class="table-wrapper">
                <el-table
                    class="stu-table"
                    :data="tableData"
                    style="width: 100%;"
                    height="100%"
                    @sort-change="handleSortChanged">
                    <el-table-column
                        fixed="left"
                        header-align="left"
                        align="center"
                        label="序号">
                        <template slot-scope="scope">
                            <div class="table-index">
                                {{ scope.$index + 1 }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        fixed="left"
                        min-width="150px"
                        prop="school_name"
                        :formatter="emptyFormatter"
                        :show-overflow-tooltip="true"
                        label="学校名称"/>
                    <el-table-column
                        :formatter="emptyFormatter"
                        prop="student_count"
                        min-width="100"
                        sortable="custom"
                        label="学生人数" />
                    <el-table-column
                        :formatter="emptyFormatter"
                        prop="ratio_count"
                        label="男女比例" />
                    <el-table-column
                        :formatter="emptyFormatter"
                        prop="name"
                        show-overflow-tooltip
                        label="校区" />
                    <el-table-column
                        :formatter="emptyFormatter"
                        prop="address"
                        show-overflow-tooltip
                        label="校区地址" />
                    <el-table-column
                        :formatter="emptyFormatter"
                        prop="building_count"
                        sortable="custom"
                        min-width="88"
                        label="楼栋数" />
                    <el-table-column
                        :formatter="emptyFormatter"
                        prop="area_size"
                        sortable="custom"
                        label="大小" />
                    <el-table-column
                        :formatter="emptyFormatter"
                        prop="use_time"
                        width="140"
                        label="参考用时" />
                    <el-table-column
                        :formatter="emptyFormatter"
                        prop="desc"
                        show-overflow-tooltip
                        label="描述" />
                    <el-table-column
                        :formatter="emptyFormatter"
                        prop="place_type"
                        show-overflow-tooltip
                        label="点位标签" />
                    <el-table-column
                        :formatter="emptyFormatter"
                        prop="price"
                        sortable="custom"
                        min-width="88"
                        label="成本价" />
                    <el-table-column
                        :formatter="emptyFormatter"
                        prop="place"
                        show-overflow-tooltip
                        label="具体位置" />
                    <el-table-column
                        prop="date"
                        label="操作"
                        fixed="right"
                        width="150">
                        <template slot-scope="scope">
                            <div>
                                <el-button
                                    :disabled="scope.row.picture == '' || scope.row.picture == '[]'"
                                    type="text"
                                    @click="handlePreviewPic(scope.row)">查看</el-button>
                                <el-button
                                    type="text"
                                    :disabled="!authResult.auth_edit"
                                    @click="handleRouteToDetail(scope.row.area_no)">编辑</el-button>
                                <el-button
                                    class="btn-delete"
                                    type="text"
                                    :disabled="!authResult.auth_delete"
                                    @click="handleDelete(scope.row)">删除</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pagination-wrapper clearfix">
                <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="page.total_count"
                    :page-size="page.page_size"
                    @current-change="getTableData" />
            </div>
        </div>
        <pic-preview
            v-model="dialogPicPreviewVisible"
            :pics="picPreviewData.picture">
            <div class="pic-preview-desc">
                <p class="title">
                    <span class="main-title">{{ picPreviewData.school_name }}</span>
                    <span class="sub-title">{{ picPreviewData.name }}</span>
                    <span class="more">#{{ picPreviewData.place_type }}#</span>
                </p>
                <p class="remark">{{ picPreviewData.remark }}</p>
            </div>
        </pic-preview>
    </div>
</template>

<script>
import Region from '@/assets/js/regin.min';
import picPreview from '@/components/common/pic-preview';

let sortMap = {
    'ascending': 'asc',
    'descending': 'desc'
};

export default {
    components: {
        picPreview
    },
    data() {
        return {
            authResult: {},
            region: Region,
            filterData: {
                region: [],
                school_name: ''
            },
            sortData: {
                field: '',
                by: ''
            },
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 0
            },
            tableData: [],
            dialogPicPreviewVisible: false,
            picPreviewData: {},
            importing: false
        };
    },
    watch: {
        dialogPicPreviewVisible(val) {
            if (!val) {
                this.picPreviewData = Object.assign({});
            }
        }
    },
    created() {
        this.$store.commit('SET_HEADER', [
            {
                title: "校园工作室管理",
            },
            {
                title: "场地管理"
            }
        ]);
        this.authResult = this.$route.meta.authResult;
        this.getTableData();
    },
    methods: {
        /**
         * 获取表格数据
         */
        getTableData(page) {
            let pid = this.filterData.region[0] || '',
                cid = this.filterData.region[1] || '';
            let { school_name } = this.filterData;

            this.$post('/ht/area%5Cget_list', {
                page_id: page || this.page.now_page,
                pid,
                cid,
                school_name,
                sort: this.sortData.field ? JSON.stringify([this.sortData]) : ''
            }, resp => {
                if (resp.code == 1) {
                    this.tableData = resp.data.list;
                    this.page.now_page = resp.data.page.now_page;
                    this.page.total_count = resp.data.page.total_count;
                    this.page.page_size = resp.data.page.page_size;
                }
            });
        },

        /**
         * 数据导入
         */
        tirggerFile(e) {
            var file = event.target.files[0];

            let form = new FormData();

            form.append("student_file", file);

            this.importing = true;
            this.$post('/ht/area%5Cimport', form, resp => {
                this.importing = false;
                if (resp.code == 1) {
                    this.getTableData(1);
                    this.$message({
                        type: 'success',
                        message: '导入成功' || resp.msg,
                        center: true
                    });
                } else {
                    this.$message({
                        type: 'warning',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * 导出筛选结果
         */
        handleExport() {
            let pid = this.filterData.region[0] || '',
                cid = this.filterData.region[1] || '';
            let { school_name } = this.filterData;
            let ticket = localStorage.getItem('sessionTicket');
            let base = this.$baseUrl;

            window.open(`${base}/ht/area%5Cget_list?pid=${pid}&cid=${cid}&school_name=${escape(school_name)}&export=1&__ticket=${ticket}`);
        },

        /**
         * 排序
         */
        handleSortChanged(data) {
            console.log(data);
            if (data.order) {
                this.sortData.field = data.prop;
                this.sortData.by = sortMap[data.order];
            } else {
                this.sortData.field = '';
                this.sortData.by = '';
            }

            this.getTableData();
        },

        /**
         * 列表渲染辅助函数：列表项为空处理
         */
        emptyFormatter(row, column, val) {
            if (!val) {
                return '--';
            }
            return val;
        },

        /**
         * 预览图片
         */
        handlePreviewPic(data) {
            this.picPreviewData = Object.assign({}, data);
            this.picPreviewData.picture = JSON.parse(this.picPreviewData.picture);
            this.dialogPicPreviewVisible = true;
        },

        /**
         * 跳转到编辑页面
         */
        handleRouteToDetail(id) {
            if (id) {
                this.$router.push({
                    name: 'PlaceEdit',
                    query: {
                        area_no: id
                    }
                });
            } else {
                this.$router.push({
                    name: 'PlaceEdit'
                });
            }
        },

        /**
         * 删除
         */
        handleDelete(data) {
            this.$confirm('确认删除该场地信息?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$post('/ht/roadshow%5Carea%5Cdelete', {
                    area_no: data.area_no
                }, resp => {
                    if (resp.code == 1) {
                        this.$message({
                            type: 'success',
                            message: '操作成功',
                            center: true
                        });
                        this.getTableData();
                    } else {
                        this.$message({
                            type: 'warning',
                            message: resp.msg,
                            center: true
                        });
                    }
                });
            }).catch(() => {
            });
        }
    }
};
</script>

<style lang="less" scoped>
.container {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.operation-wrapper {
    display: flex;
    flex-direction: row-reverse;
    padding: 12px 23px;
    background-color: #fff;

    .btn-import-wrap {
        display: inline-block;
        position: relative;
        overflow: hidden;
        cursor: pointer;
        vertical-align: top;
        .import-input {
            margin-left: -100%;
            position: absolute;
            left: 0;
            top: 0;
            width: 200%;
            height: 100%;
            cursor: pointer;
            opacity: 0;

            &.abled:hover {
                & + .el-button {
                    color: #409EFF;
                    border-color: #c6e2ff;
                    background-color: #ecf5ff;
                }
            }
        }
    }

    .el-button {
        margin-left: 10px;
    }
}
.content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 15px;
    overflow: hidden;
}
.search-wrapper {
    padding: 15px;
    background-color: #fff;
}
.filter-item {
    .el-form-item {
        margin-bottom: 0;
    }
}
.table-wrapper {
    flex: 1;
    background-color: #fff;

    .el-button {
        padding: 0;
    }

    .btn-delete {
        color: #fd4d32;
        &.is-disabled {
            color: #c0c4cc;
            cursor: not-allowed;
        }
    }
}
.pagination-wrapper {
    padding-top: 10px;
    .el-pagination {
        float: right;
        padding: 0;
        background-color: transparent;
    }
}
.pic-preview-desc {
    padding: 24px 24px 10px;
    border-bottom: 1px solid #e9e9e9;
    .title {
        margin-bottom: 10px;
        font-size: 16px;
        line-height: 24px;
        color: #000;

        .main-title {
            font-weight: bold;
        }

        .sub-title {
            display: inline-block;
            margin-left: 5px;
            font-size: 14px;
        }

        .more {
            display: inline-block;
            margin-left: 15px;
            color: rgba(0, 0, 0, .65)
        }
    }
    .remark {
        line-height: 22px;
        color: #333;
    }
}
</style>
<style lang="less">
.place-list-container {
    .filter-item {
        .el-form-item__label {
            padding: 0;
            line-height: 32px;
        }
        .el-form-item__content {
            line-height: 32px;
        }
    }
}
</style>


